import {
  Button,
  Form,
  FormItem,
  Image,
  message,
  Modal,
  Radio,
  RadioGroup,
  Space,
  TypographyText
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'

import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { ExpressBottomItem } from '@/apis/aiTestSkinTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import UploadFile from '@/components/UploadFile'
import { TABLE_FORMAT } from '@/constants'
import { useDialog } from '@/hooks'
import { provinceList } from '@/utils'

export default defineComponent({
  name: 'YxExpressTemplete',
  setup() {
    const showDialog = ref(false)
    const data = ref('')
    const dialogLoading = ref(false)
    const pList = ref(provinceList)
    const optionItemCur = ref({} as ExpressBottomItem)
    const { showConfirm } = useDialog()

    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          slots: {
            buttons: 'batchButtons'
          }
        },
        columnConfig: {
          minWidth: 100
        },

        columns: [
          {
            title: 'ID',
            field: 'id',
            width: 150
          },
          {
            title: 'Banner',
            field: 'bannerImg',
            slots: {
              default: 'img'
            }
          },
          {
            title: '状态',
            fixed: 'state',
            slots: {
              default: 'state'
            },
            width: 150
          },
          {
            title: '创建时间',
            field: 'createTime',
            minWidth: 200,
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 180
          }
        ],
        proxyConfig: {
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await aiTestSkinApi.BottomPictureInfo()
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //启用禁用操作
    function handleForbidden(item) {
      showConfirm({
        content: item.status == 1 ? '确认禁用该条数据？' : '确认启用该条数据？',
        onOk: async () => {
          try {
            await aiTestSkinApi.BottomPictureDisable({
              id: item.id,
              state: item.state == 0 ? 1 : 0
            })
            tableRef.value.refresh()
          } catch (error) {}
        }
      })
    }

    //新增
    function add() {
      optionItemCur.value.bannerUrl = ''
      optionItemCur.value.state = 1
      showDialog.value = true
    }

    // 新增确定
    async function dialogConfirm() {
      if (!optionItemCur.value.bannerUrl) {
        message.error('请上传图片')
        return
      }
      if (!optionItemCur.value.state) {
        message.error('请选择状态')
        return
      }

      try {
        dialogLoading.value = true

        await aiTestSkinApi.getBottomPicture({
          bannerUrl: optionItemCur.value.bannerUrl,
          state: optionItemCur.value.state
        })
        showDialog.value = false
        tableRef.value.refresh()
      } finally {
        dialogLoading.value = false
      }
    }
    //刷新
    async function refresh() {
      await tableRef.value.table.commitProxy('query')
    }
    function handleDelete(row) {
      showConfirm({
        content: '确认删除该商品？',
        onOk: async () => {
          try {
            await aiTestSkinApi.BottomPictureDelete(row.id)
            refresh()
          } catch {}
        }
      })
    }

    return {
      tableRef,
      data,
      tableConfig,
      showDialog,
      dialogLoading,
      optionItemCur,
      pList,
      dialogConfirm,
      handleDelete,
      handleForbidden,
      add
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            img: ({ row }) => (
              <Image
                style={{ width: '200px', height: '150px' }}
                src={row.bannerUrl}
              ></Image>
            ),
            batchButtons: () => (
              <Space>
                <Button type="primary" onClick={() => this.add()}>
                  新增
                </Button>
              </Space>
            ),
            state: ({ row }) => {
              return (
                <Space>
                  {row.state == 0 ? (
                    <TypographyText type="danger">禁用</TypographyText>
                  ) : (
                    <TypographyText type="success">启用</TypographyText>
                  )}
                </Space>
              )
            },

            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDelete(row)}
                >
                  删除
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleForbidden(row)}
                >
                  {row.state === 0 ? '启用' : '禁用'}
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showDialog}
          confirmLoading={this.dialogLoading}
          title={'新增'}
          destroyOnClose
          onOk={this.dialogConfirm}
        >
          <Form labelCol={{ span: 4 }} style={{ marginTop: '15px' }}>
            <FormItem label={'上传图片'} required>
              <UploadFile v-model={[this.optionItemCur.bannerUrl, 'urls']}>
                上传图片
              </UploadFile>
            </FormItem>
            <FormItem label="状态：" required>
              <RadioGroup v-model:value={this.optionItemCur.state}>
                <Radio value={1}>启用</Radio>
                <Radio value={0}>禁用</Radio>
              </RadioGroup>
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
})
